<div class="container">
    <div class="controls">
        <OverlaysEditor axisColumn="bars" ZERO_BASELINE="--zero-baseline--" />
    </div>
    <div class="meta">
        <p>Overlays metadata</p>
        <pre>{JSON.stringify($metadata.visualize, null, 2)}</pre>
    </div>
</div>

<hr />

<div style="display: none">
    <div ref:iframeWindow>
        <div>
            <div id="chart"></div>
        </div>
    </div>
</div>

<style>
    .container {
        display: flex;
    }
    .controls {
        width: 33% !important;
        min-width: 385px;
        margin-right: 20px;
    }
    .meta {
        width: 500px;
        min-width: 500px;
    }
    .meta > p {
        color: #888;
    }
</style>

<script>
    /* globals dw */
    import OverlaysEditor from '../OverlaysEditor.html';
    import Chart from '@datawrapper/chart-core/lib/dw/svelteChart';
    import metadata from './lib/overlaysMetadata.mjs';

    const themeData = {
        colors: {
            palette: [
                '#18a1cd',
                '#1d81a2',
                '#15607a',
                '#00dca6',
                '#09bb9f',
                '#009076',
                '#c4c4c4',
                '#c71e1d',
                '#fa8c00',
                '#ffca76',
                '#ffe59c'
            ],
            picker: {
                rowCount: 6
            }
        }
    };

    const vis = {
        axes() {
            return {
                labels: {
                    length: 5
                },
                bars: {
                    name() {
                        return 'percent_change';
                    }
                },
                groups: null,
                colors: null
            };
        },
        dataset: {
            columns() {
                return [
                    {
                        type: () => 'number',
                        name: () => 'min',
                        title: () => 'Min'
                    },
                    {
                        type: () => 'number',
                        name: () => 'percent_change',
                        title: () => 'Percent change'
                    },
                    {
                        type: () => 'number',
                        name: () => 'max',
                        title: () => 'Max'
                    }
                ];
            },
            hasColumn() {
                return true;
            },
            column(name) {
                return this.columns().find(c => c.name() === name);
            }
        },
        theme() {
            return {
                colors: {
                    palette: [
                        '#18a1cd',
                        '#1d81a2',
                        '#15607a',
                        '#00dca6',
                        '#09bb9f',
                        '#009076',
                        '#c4c4c4',
                        '#c71e1d',
                        '#fa8c00',
                        '#ffca76',
                        '#ffe59c'
                    ]
                }
            };
        }
    };

    dw.backend.hooks = {
        register: function () {},
        unregister: function () {}
    };

    const chart = new Chart({ metadata, themeData, vis });

    export default {
        components: { OverlaysEditor },
        data() {
            return {};
        },
        store: () => chart
    };
</script>
